<template>
  <div>
      <!-- 头部 -->
      <div class="homeHeader">
        <!-- 三个结构 -->
        <div class="homeHeader-left">
          <van-icon class="iconfont" class-prefix="icon" name="fenlei"></van-icon>
          <span>分类</span>
        </div>
        <!-- 中间 -->
        <div class="homeHeader-center">
          <van-icon name="search" />
          <span class="search-text">搜索商品店铺</span>
        </div>
        <!-- 右侧消息图标 -->
        <div class="homeHeader-right">
          <van-icon name="search"></van-icon>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
//开始写头部样式
.homeHeader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:46px;
  background:#f66;
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding:0 10px;
  &-left{
    display:flex;
    padding-right:15px;
    flex-direction: column;
    align-items: center;
    .iconfont{
      font-size:22px;
    }
  }
  &-center{
    flex:1;
    height:30px;
    display:flex;
    align-items: center;
    border-radius:20px;
    background:rgba(255,255,255,.2);
    .van-icon{
      margin:0 10px;
      font-size:16px;
    }
  }
  &-right{
    display:flex;
    align-items: center;
    .van-icon{
      font-size:25px;
      margin-left:10px;
    }
  }
}

</style>